<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<script>
    //原生ajax  Async Javascript And XML
    //在网页不刷新的情况下可以请求数据然后实现网页局部刷新或者渲染

    //http事务 一个请求加上一个相关的响应 就是一个完整的http事务


    //如何创建一个原生的ajax
    //ajax 核心对象  XMLHttpRequest

    //1.创建一个XMLHttpRequest的实例 为xhr
    let xhr = new XMLHttpRequest();
    //readyState: 0 请求未初始化 刚刚实例化xmlHttpRequest
    //readyState: 1 客户端与服务器建立链接 调用了open方法
    //readyState: 2 请求已经被接受
    //readyState: 3 请求正在处理中
    //readyState: 4 请求处理完成,响应已就绪 已经拿到了服务器的返回结果

    //2.为xhr.onreadystatechange设置事件监听
    xhr.onreadystatechange = function (){

        if(xhr.readyState === 4){
            switch (xhr.status){
                case 200:{
                    console.log(JSON.parse(xhr.responseText));
                    break;
                }
                case 404:{
                    console.log("页面或者资源找不到");
                    break;
                }
            }

        }
    }

    //3.调用xhr.open(请求方式,请求地址,同步异步)
    xhr.open("GET","https://cnodejs.org/api/v1/topics",false);
    //method(请求方式  string
    //  GET获取数据 POST发送数据 DELETE删除 PUT修改
    //url(请求地址  string
    //async(同步异步  布尔 false=>异步    true=>同步  默认值是false
    //username password

    //4.发送请求的数据
    xhr.send(null)

    console.log(xhr);

    //http常见状态码
    //1xx 请求正在处理
    //2xx 一般都表示成功
    //3xx 一般都表示重定向
    //4xx 一般都表示资源找不到 客户端错误
    //5xx 服务器内部错误



    //http是一个无状态的(在服务器与客户端通讯的过程中,服务器不知道客户端是谁)
    //通过 token的方式 还有 cookie和session的方式来解决


    //跨域 (不同源) JSONP CORS(后端) Proxy(代理)
    //非跨域 (同源)
    //同源 协议://域名:端口号  都一样 就是同源  如果有一个不一样 就是非同源(跨域)



    //https://www.cnodejs.org/api/v1/topics:80
    //https://mail.qq.com
    //协议(http/https/ftp/smtp/pop3)
    //域名(www.一级域名.二级域名.顶级域名(org/com/cn/edu/gov))  /路径/路径
    //端口号(http:80/https:443)

</script>
</body>
</html>